<template>
    <el-dialog
        class="chart-form"
        title="选择数据源"
        :visible.sync="visible"
        width="450px"
        @close="close"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <div class="form-content">
          <div class="title">
              <span>表单</span>
              <el-input placeholder="搜索" size="mini" :style="searchInputStyle" clearable
                @focus="searchInputStyle = '100%'"
                @blur="handleSearchInputBlur"
                v-model="searchInput"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
          </div>
          <div class="content">
              <div class="item" :class="{ active: worksheet.id === worksheetId}"
                v-for="worksheet in worksheetFilterList" :key="worksheet.id"
                @click="worksheetId = worksheet.id"
              >
              <div>
                  <i class="menu-icon el-icon-s-order"></i>
                  <span>{{worksheet.name}}</span>
              </div>
                <i class="menu-icon el-icon-check" v-show="worksheet.id === worksheetId"></i>
              </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="handleOk">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {getAllWorksheet} from "@/api/app"
export default {
  props: {
    visible: Boolean,
    formId: {
        type: String,
        default: ''
    }
  },
  data() {
    return {
      searchInput: '',
      searchInputStyle: 'width: 100px',
      worksheetId: '',
      worksheetList: []
    };
  },
  computed:{
    appId() {
        return this.$route.params.appId;
    },
    worksheetFilterList() {
      return this.worksheetList.filter(work => work.name.includes(this.searchInput))
    }
  },
  methods: {
    handleSearchInputBlur() {
      if(this.searchInput === ''){
        this.searchInputStyle = 'width: 100px'
      }
    },
    close() {
      this.$emit("close");
    },
    save() {
      this.$emit("save", this.worksheetId);
    },
    handleOk() {
      if(this.worksheetId === '') {
        this.close();
        return
      }
      this.save()
    }
  },
  async mounted(){
      this.worksheetId = this.formId
      this.worksheetList = await getAllWorksheet(this.appId)
  },
};
</script>
<style lang="less">
.chart-form .el-dialog__header{
  border-bottom: 1px solid #D9D9D9;
}
.form-content{
  height: 400px;
  margin: 10px 10px 0;
  border: 1px solid #D9D9D9;

  .title {
    height: 40px;
    padding: 0 20px;
    border-bottom: 1px solid #D9D9D9;
    position: relative;
    display: flex;
    align-items: center;

    span{
      font-weight: bold;
    }

    input {
      border: none !important;
    }

    .el-input{
      border: 1px solid #D9D9D9;
      border-radius: 15px;
      position: absolute;
      background: #f4f4f4;
      right: 0;
    }
  }

  .content {
    height: 360px;
    overflow: auto;

    .item {
      height: 40px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;

      span {
        margin-left: 5px;
      }

      i{
        color: rgb(127, 178, 255);
        font-size: 16px;
      }
    }
    .item:hover, .active {
      background-color: #f5f5f5;
    }
  }
}
</style>